<template>
    <!-- 采购信息 -->
    <Hidden_top />
    <Tags />
    <div class="purorder">
        <div class="w header">
            <div class="caption">
                <div>
                    <span class="cjlogo"></span>
                    <h3>采购燃气社维修</h3>
                    <div class="dates">发布日期：<span>2023-12-12</span></div>
                </div>
                <div>
                    <div class="remaining">距离报价结束还有<span class="remdata">29</span>天</div>
                    <div class="buttomn">
                        <el-button type="primary" @click="onSubmit">立即报价</el-button>
                    </div>
                </div>
            </div>
            <div class="commodities">
                <div class="goods"><span class="goodSize">采购商品</span></div>
                <div>
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column prop="date" label="商品名称" />
                        <el-table-column prop="name" label="商品分类" />
                        <el-table-column prop="state" label="采购量" />
                        <el-table-column prop="city" label="单位" />
                        <el-table-column prop="address" label="目标单价" />
                        <el-table-column prop="zip" label="采购周期" />
                    </el-table>
                </div>
            </div>
            <div class="commodities">
                <div class="goods"><span class="goodSize">采购需求</span></div>
                <div>
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column prop="date" label="采购类型" />
                        <el-table-column prop="name" label="是否需要发票" />
                        <el-table-column prop="state" label="收货地址" />
                        <el-table-column prop="city" label="备注" width="563px" />
                    </el-table>
                </div>
            </div>
            <div class="commodities">
                <div class="goods"><span class="goodSize">采购联系人</span></div>
                <div>
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column prop="date" label="采购人姓名" />
                        <el-table-column prop="name" label="采购人电话" />
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import Hidden_top from '@/components/hidden_top/index.vue';
import Tags from '@/components/tags/index.vue';
const tableData = [
    {
        date: '1',
        name: '1',
        state: '1',
        city: '1',
        address: '1',
        zip: '1',
    }
]
const onSubmit = () => {

}
</script>
<style lang="scss" scoped>
.w {
    width: 75vw;
    margin: 0 auto;
}

.purorder {
    height: 36.5vw;
    background-color: #F6F6F6;
}

// .actives {
//     color: #C7CBD3;
// }

.header {
    height: 36.5vw;
    padding: 0 20px;
    background-color: #FFFFFF;

    .caption {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 6.625vw;
        padding: 0 20px;
        border-bottom: 1px solid #DDDDDD;

        .cjlogo {
            display: inline-block;
            position: absolute;
            top: 0;
            left: -20px;
            width: 40px;
            height: 38px;
            background: url('@/assets/img/header/cgxx.png') no-repeat;
            background-size: 55px 38px;

        }

        .dates {
            margin-top: 10px;
            font-size: 12px;
            color: #333;
        }

        .remaining {
            font-size: 14px;
            color: #333;

            .remdata {
                font-weight: 700;
                font-size: 16px;
                color: red;
            }
        }

        .buttomn {
            margin: 10px 0 0 60px;
        }
    }
}

.el-table {

    .cell {
        text-align: center;
    }
}

.el-table th.el-table__cell {
    background-color: #ECF4FF !important;
    color: #333;
}



.commodities {
    .goods {
        margin: 20px 0;
        padding-left: 10px;
        border-left: 3px solid #ACACAC;

        .goodSize {
            font-size: 16px;
            font-weight: 700;
            color: #333333;
        }
    }
}
</style>
